<template>
  <h2>ReadMoreLine 多行文本折叠</h2>
  <p>文本超过限定行数时，会显示“更多”按钮。</p>
  <h3>Attributes</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>Slots</h3>
  <table-info type="slot" :data="slotTable"></table-info>
  <h3>基本使用</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <read-more-line
      style="width: 100px"
      content="我的内容特别多，我的内容特别多，我的内容特别多，我的内容特别多，我的内容特别多，我的内容特别多"
      :limit="3"
      :lineHeight="30"
    ></read-more-line>

    <template #code>
      {{ `
<read-more-line
  style="width: 100px"
  content="我的内容特别多，我的内容特别多，我的内容特别多，我的内容特别多，我的内容特别多，我的内容特别多"
  :limit="3"
  :lineHeight="30"
></read-more-line>
      ` }}
    </template>
  </code-demo>
</template>

<script setup>
const propsTable = [
  { name: 'content', desc: '内容文本', type: 'string', default: '' },
  {
    name: 'limit',
    desc: '行数限制，超出行数用省略',
    type: 'number',
    default: '3',
  },
  {
    name: 'lineHeight',
    desc: '内容行高，单位为px',
    type: 'number',
    default: '30',
  },
]

const slotTable = [
  { name: 'more', desc: '有更多内容时的插槽。' },
  { name: 'less', desc: '要折叠收起时的插槽。' },
]
</script>
